<template>
	<view class="grounp-buy">
		<uni-nav-bar left-icon="back" left-text="团购专区" :statusBar="true" :fixed="true" backgroundColor="transparent"
			@clickLeft="leftClick" />
		<view class="banner">
			<swiper class="swiper" indicator-dots="true" autoplay="true" duration="2000" circular="true"
				style="height: 400rpx;">
				<swiper-item v-for="(item,index) in adList.list" :key="index" style="height: 400rpx;">
					<image :src="item.image?imgRemote+item.image:imgRemote+'/mpimg/groupbuy.png'" class="head-bg" ></image>
				</swiper-item>
			</swiper>
		</view>
		

		 <view style="height: 300rpx;"></view> 
		<view class="active-good" v-if="list.length" :style="{top:height}">
			
			<my-recomend v-for="(item, index) in list" :key="index" :ware="item" class="myc_recomend">
			</my-recomend>
			
			<!-- <view v-for="(item,index) in list" :key="index" class="flex white_b" @click="detailPage(item.id)">
				<image :src="imgRemote+item.main_image" mode="aspectFill"></image>
				<view class="info">
					<view class="fs-14 line-2">{{item.name}}</view>

					<view class="price">
						<view class="flex-center flex-left-right flex-full">
							<view><text class="red fs-12">团购价￥</text>
							<text class="red fs-16 bold">{{item.sku[0].market_price}}</text></view>
							<text class="buy">立即购买</text>
						</view>
                          
					</view>
				</view>
			</view> -->

		</view>
		<view class="search_bitmap center" v-else>
			<image class="bitmap" src="/static/img/no_content.png" mode="aspectFit"></image>
			<view class="gray_font fs-15">抱歉，没有相关商品哦~</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				height:'',
				page: 1,
				adList: [],
				list: [],
				imgRemote: getApp().globalData.imgRemote
			}
		},
		methods: {

			leftClick() {
				uni.navigateBack()
			},
			getList() {
				let params = {
					page: this.page,
					limit: 10,
					city:getApp().globalData.city
				}
				this.$get(this.$api.gGoods, params, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						this.list = this.list.concat(data.data)
					}
				})
			},
			adcateList() {
				this.$get(this.$api.adcateList, {}, (res) => {
					let {
						data
					} = res;
					if (data.code == 1) {
						// this.adcateList()
						let adList = data.data.filter((item) => {
							return item.id == 5
						});
						this.adList = adList[0]
					}
				})
			},
			detailPage(id){
				uni.navigateTo({
					url:'/pages/index/shopdetail?id='+id
				})
			}
		},
		onLoad() {
			this.getList();
			this.adcateList();
			let _=this;
			 let info = uni.createSelectorQuery().select(".banner");
			　　　  　info.boundingClientRect(function(data) { //data - 各种参数
			　　　  _.height='calc('+data.height+'px' + ' + 10rpx)';  // 获取元素宽度
			　　    }).exec()
			       
		},
		onReachBottom() {
			this.page++;
			this.getList()
		}
	}
</script>

<style scoped lang="scss">
	.myc_recomend {
		margin-bottom: 14rpx;
	}
	.grounp-buy {
		.bitmap{
			width: 69%;
		}
		.banner {
			position: absolute;
			width: 100%;
			top: 0;
		}

		/deep/ .uni-navbar--border {
			border: none;
		}

		.head-bg {
			width: 100%;
			height: 100%;
		}
	}

	.active-good {
	
	
	
		//margin: 0rpx 30rpx 30rpx;
	//	position: absolute;
		    display: flex;
		    flex-wrap: wrap;
		    justify-content: space-between;
		    padding: 0 30rpx;
		
	}





	.active-good image {
		width: 250rpx;
		height: 250rpx;
		border-radius: 10rpx;
		margin-right: 20rpx;
	}

	.active-good .info {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		padding: 20rpx 20rpx 20rpx 0;
		// margin-top: 30rpx;	
	}

	.active-good .info .price {
		display: flex;

		justify-content: space-between;
		/* align-items: ; */
	}

	.fs-14 {
		font-size: 28rpx;
	}

	.fs-12 {
		font-size: 24rpx;
	}

	.fs-16 {
		font-size: 32rpx;
	}

	.red {
		color: #F7535F;
	}

	.fixed-top {
		position: fixed;
		width: 100%;
		/* z-index: -1; */
		/* background: white; */
	}

	.sale {
		color: gray;
		text-decoration: line-through;
	}

	.bg-r {
		width: 100%;
		background: #FFE048;
		height: 50rpx;
	}

	.go {
		background: #FFE048;
		color: black;
		border-radius: 20rpx;
		font-size: 28rpx;
		padding: 4rpx 20rpx;
	}
	.buy {background: $m-c;color:white;padding: 4rpx 10rpx;border-radius: 10rpx;font-size:24rpx;}
</style>
